<template lang="pug">
  el-drawer.commonDrawer(
    title="课程详情"
    :visible.sync="visibleDialog"
    v-loading="loading"
    custom-class="commonDrawer"
    direction="rtl"
    size="840px"
    append-to-body
    destroy-on-close
    modal-append-to-body
  )
    .drawer-content
      form-info(:items="basicFields" :layoutCol="{ sm: 12, md: 12, lg: 12 }")
      el-row.mt20(:gutter="32")
        el-col(:span="12" v-for="(item, index) in attachments" :key="index")
          .mediaBox
            span {{item.name}}
            .res
              a-image(v-if="resTypeFilter(item.url) === 'image'" :url="item.url" mode="cover")
              video(v-else-if="resTypeFilter(item.url) === 'video'" :src="item.url" controls="controls")
              audio(v-else-if="resTypeFilter(item.url) === 'audio'" :src="item.url" controls="controls")
      //- form-box(
      //-   ref="basicForm"
      //-   :fields="basicFormFields"
      //-   :showBtns="false"
      //-   labelWidth="126px"
      //-   :disabled="disabled"
      //-   :layoutCol="{ sm: 24, md: 24, lg: 24 }"
      //- )
</template>
<script>
import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import FormInfo from '@/components/Basic/Form/FormInfo'
import { getCourseInfo } from '../api'

export default {
  components: {
    FormInfo,
    AImage
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      dirList: [],
      info: {},
      attachments: []
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    basicFields () {
      const { info, attachments } = this
      const contentTemplate = info.contentTemplate ? JSON.parse(info.contentTemplate) : []
      const tools = info.tools ? JSON.parse(info.tools) : []
      console.log(contentTemplate, tools, attachments)
      const list = [
        {
          key: 'indexInPackage',
          label: '教案编号',
          initialValue: info.indexInPackage
        },
        {
          key: 'title',
          label: '领域',
          initialValue: info.title
        }
      ]
      contentTemplate.forEach((x, index) => {
        list.push({
          key: `contentTemplate-${index}`,
          label: x.title,
          initialValue: x.content,
          layoutCol: { sm: 24, md: 24, lg: 24 }
        })
      })
      tools.forEach((x, index) => {
        list.push({
          key: `tool-${index}`,
          label: `教学资源(${x.userName})`,
          initialValue: `${x.name}${x.number}${x.unit}`,
          layoutCol: { sm: 12, md: 12, lg: 12 }
        })
      })
      return list
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getData()
      }
    }
  },
  created () {
  },
  methods: {
    // 获取目录
    getData () {
      getCourseInfo({ id: this.id }).then(res => {
        this.info = res || {}
        this.attachments = res.attachments ? JSON.parse(res.attachments) : []
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  padding: 0 24px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
.mediaBox{
  display: flex;
  margin-top: 24px;

  > span {
    width: 64px
  }

  > .res {
    flex: 1;
    > * {
      height: 184px;
      width: 100%;
    }
  }
}
</style>
